<template>
	<view class="page">
		<image class="bg-box" src="../../../static/images/default/screen_icon_new.png" mode="widthFix"></image>
		<view class="haoren-box">
			<image class="show-img" :src="imgurl + '/money.png'" mode="widthFix"></image>
			<view class="scroll-box">
				<view class="item-data" v-if="Number(haoRemDetail.haoren)">
					<view class="left-data">
						<view class="item-money">+{{ haoRemDetail.haoren }}</view>
						<view class="item-time">{{ haoRemDetail.time }}</view>
					</view>
					<view class="right-btn success-text" @tap="goToPage">立即领取</view>
				</view>
				
				<!--  -->
				<view class="close-haoren text-lg" v-else>
					<text>暂无可领取好人值</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: this.$BASE_URL_YIYUAN,
				haoRemDetail: {},
			}
		},
		onShow() {
			this.init()
		},
		methods: {
			goToPage() {
				uni.navigateTo({
					url: "/pages/user/good/ment"
				})
			},
			
			//初始化列表
			init() {
				this.$api.get({
					url: '/user/freezeHaoren',
					success: res => {
						this.haoRemDetail = res;
					}
				});
			}
		}
	}
</script>

<style scoped>
.page {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	background: #FFFFFF !important;
	overflow-y: scroll;
}
.bg-box {
	width: 100%;
	height: 100%;
	position: absolute;
}
.haoren-box {
	width: 681rpx;
	height: 712rpx;
	background: white;
	border-radius: 20rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	top: 534rpx;
	padding: 180rpx 0 70rpx;
	box-sizing: border-box;
}
.scroll-box {
	width: 100%;
	height: 100%;
	padding: 0 47rpx;
	box-sizing: border-box;
	overflow-y: scroll;
}
.item-data {
	padding: 50rpx 0 30rpx;
	border-bottom: solid 1rpx #E5E5E5;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.item-money {
	font-size: 30rpx;
	font-weight: 800;
	color: #FE694A;
	line-height: 30rpx;
	margin-bottom: 36rpx;
}
.item-time {
	font-size: 24rpx;
	color: #999999;
	font-weight: 500;
}
.right-btn {
	width: 160rpx;
	height: 60rpx;
	border-radius: 30rpx;
	font-size: 28rpx;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E4E4E4;
}
.show-img {
	width: 327rpx;
	height: 424rpx;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	z-index: 999;
	top: -270rpx;
}
.success-text {
	background: #FFA843;
}
.close-haoren {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #9e9c9f;
}
</style>
